<template>
  <div class='container'>
    <el-card class="box-card">
      <el-form ref="form" label-width="80px" :model="articleInfo" :inline="true">
        <el-row type="flex" justify="start">
          <!-- 关键字 -->
          <el-col :span="5">
            <el-form-item label="关键字">
              <el-input v-model="articleInfo.keyword" placeholder="根据文章标题搜索" />
            </el-form-item>
          </el-col>
          <!-- 状态 -->
          <el-col :span="5">
            <el-form-item label="状态">
              <el-select v-model="articleInfo.state" placeholder="请选择">
                <el-option
                  v-for="item in stateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="5">
            <el-form-item>
              <el-button @click="onClear">清空</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="search-btn" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="1" :offset="7" class="add-user">
            <el-button type="success" @click="onAdd">新增技巧</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 信息数量 -->
      <el-alert type="info" show-icon :closable="false">
        <template>
          共{{ total }}条记录
        </template>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" stripe highlight-current-row>
        <el-table-column prop="id" label="序号" />
        <el-table-column label="文章标题">
          <template slot-scope="scope">
            {{ scope.row.title }}
            <i v-if="scope.row.videoURL" class="el-icon-film" @click="open(scope.row.videoURL)"></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" />
        <el-table-column prop="username" label="录入人" />
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | formatTimeXxh }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.state === 0 ? '已禁用' : '已启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 预览 -->
            <el-button type="text"  @click="onPreview(scope.row)">预览</el-button>
            <!-- 启用 禁用 -->
            <el-button type="text" v-if="scope.row.state === 0" @click="onEnable(scope.row)">启用</el-button>
            <el-button type="text" v-else @click="onForbidden(scope.row)">禁用</el-button>
            <!-- 修改 -->
            <el-button type="text" :disabled="scope.row.state === 1" @click="onEdit(scope.row)">修改</el-button>
            <!-- 删除 -->
            <el-button type="text" :disabled="scope.row.state === 1" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="articleInfo.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="articleInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        :total="total">
      </el-pagination>
      <!-- 预览文章组件 -->
      <articles-preview
        :previewDialogVisible="previewDialogVisible"
        :previewInfo="previewInfo"
        @on-close="previewDialogVisible = false"
      />
      <!-- 新增文章 修改文章 组件 -->
      <articles-add
        :text="text"
        :articleFormDialogVisible="articleFormDialogVisible"
        :articleForm="articleForm"
        @on-close="closeArticleDialog"
        @load-article-list="loadArticleList"
      />
      <!-- 视频组件 -->
      <articles-video
        :videoDialogVisible="videoDialogVisible"
        :url="url"
        @on-close="closeVideo"
      />
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles.js'
import articlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
import ArticlesVideo from '../components/articles-video.vue'
export default {
  components: { articlesPreview, ArticlesAdd, ArticlesVideo },
  data () {
    return {
      // 搜索文章的数据对象
      articleInfo: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      // 状态选择器
      stateList: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      // 表格数据总数
      total: 1,
      // 表格数据
      tableData: [],
      previewDialogVisible: false, // 控制 预览文章组件
      previewInfo: {}, // 预览文章组件的数据对象
      articleFormDialogVisible: false, // 控制 新增、编辑 文章组件
      articleForm: {
        title: '',
        id: null,
        articleBody: '',
        videoURL: ''
      }, // 添加、编辑 组件的数据对象
      text: '',
      videoDialogVisible: false, // 控制视频组件弹层
      url: null // 视频路径
    }
  },

  created () {

  },

  methods: {
    // 加载文章列表
    async loadArticleList () {
      let res = ''
      try {
        res = await list(this.articleInfo)
        // console.log(res)
        this.tableData = res.data.items
        this.total = res.data.counts
      } catch (err) {
        this.$message.error('系统繁忙')
      }
      return res
    },
    // 点击清空按钮
    onClear () {
      this.articleInfo.keyword = null
      this.articleInfo.state = null
      this.loadArticleList()
    },
    // 点击搜索按钮
    onSearch () {
      this.loadArticleList()
    },
    // 点击新增用户 显示弹层组件
    onAdd () {
      this.text = '新增'
      this.articleFormDialogVisible = true
    },
    // 选择的每一页的数量size
    handleSizeChange (newSize) {
      // console.log(`每页 ${newSize} 条`)
      this.articleInfo.pagesize = newSize
      this.loadArticleList()
    },
    // 选择切换当前页page
    handleCurrentChange (newPage) {
      // console.log(`当前页: ${newPage}`)
      this.articleInfo.page = newPage
      this.loadArticleList()
    },
    // 点击预览
    onPreview (row) {
      this.previewDialogVisible = true
      this.previewInfo.title = row.title
      this.previewInfo.createTime = row.createTime
      this.previewInfo.username = row.username
      this.previewInfo.visits = row.visits
      this.previewInfo.articleBody = row.articleBody
    },
    // 点击启用
    async onEnable (row) {
      await changeState({ id: row.id, state: 1 })
      this.loadArticleList()
      this.$message.success('操作成功')
    },
    // 点击禁用
    async onForbidden (row) {
      await changeState({ id: row.id, state: 0 })
      this.loadArticleList()
      this.$message.success('操作成功')
    },
    // 点击修改
    onEdit (row) {
      this.text = '修改'
      this.articleForm.id = row.id // 添加id
      this.articleForm.title = row.title
      this.articleForm.articleBody = row.articleBody
      this.articleForm.videoURL = row.videoURL
      this.articleFormDialogVisible = true
      // console.log(row)
    },
    // 点击删除
    onDelete (row) {
      this.$confirm('即将执行永久删除操作，是否确定？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove({ id: row.id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // console.log(res, 8888888888888)
          // if () {}
          const obj = await this.loadArticleList() // 删除成功 重新加载页面
          console.log(obj)
          if (!obj.data.items.length) {
            this.articleInfo.page = this.articleInfo.page - 1
            this.loadArticleList()
          }
        } catch (err) {
          this.$message({
            type: 'error',
            message: '删除失败!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭文章对话框弹层
    closeArticleDialog () {
      this.articleFormDialogVisible = false // 关闭对话框
      this.articleForm = {
        title: '',
        id: null,
        articleBody: '',
        videoURL: ''
      }
    },
    // 点击视频图标
    open (url) {
      console.log(55555555555)
      this.videoDialogVisible = true
      this.url = url
    },
    // 关闭视频组件
    closeVideo () {
      this.videoDialogVisible = false
      this.url = null
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 10px;
}
/deep/.el-alert__icon.is-big {
  font-size: 16px!important;
}
/deep/.el-alert .el-alert__description {
  margin: 0!important;
  font-size: 13px!important;
}
/deep/.cell {
  // 表格内容居中显示
  text-align: center!important;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
.el-icon-film {
  color: blue!important;
  cursor: pointer;
}
</style>
